<template>
	<view class="wait-ship">
		<view class="order-list">
			<view v-for="(order, index) in waitShipOrders" :key="index" class="order-item">
				<view class="order-header">
					<image class="product-image" :src="productImage" mode="aspectFill"></image>
					<text class="product-name">{{ order.w_name }}</text><text class="product-count">x{{ order.quantity }}</text> 
				</view>
				<view class="order-info">

					<text class="order-status">待发货</text>
				</view>
				<!-- <view class="action-buttons"> -->
					<!-- <u-button size="small" shape="circle"
						color="linear-gradient(to right, rgb(181, 39, 216), rgb(213, 4, 84))" text="确认收货"
						@click="cancelOrder(index)"></u-button> -->

			<!-- 	</view> -->
			</view>
		</view>
		<view v-if="waitShipOrders.length === 0" class="no-order">
			<text>暂无待发货订单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				waitShipOrders: [
				
				],
				productImage: 'http://img06.jiuxian.com/2024/0111/17a8113edc3c46cf91261b1c29e574135.jpg',
				status:"待发货",
				userId:0
			};
		},
		created() {
			const {uid} = uni.getStorageSync('uid');
			
			// Assign uid to userId
			this.userId = uid;
			console.log(this.userId );
			this.getStatus()
			
		},
		methods: {
			cancelOrder(index) {
				console.log('取消订单', this.waitShipOrders[index]);
				// 处理取消订单逻辑
			},async getStatus() {

				const param = {
					status: this.status,
					userId: this.userId
				}
				const res = await this.$request.get('/system/logistics-order/getByStatus', param)
				console.log(res);
				if (res.code === 200) {

					this.waitShipOrders = this.waitShipOrders.concat(res.data.list)
				} else {

				}
			},
			contactSeller(index) {
				console.log('联系卖家', this.waitShipOrders[index]);
				// 处理联系卖家逻辑
			},
		},
	};
</script>

<style>
	.wait-ship {
		padding: 0px;
	}

	.order-list {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.order-item {
		border-bottom: 1px solid #eee;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-header {
		display: flex;
		align-items: center;
	}

	.product-image {
		width: 60px;
		height: 60px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.order-status {
		font-size: 14px;
		color: #ff6600;
	}

	.order-info {
		display: flex;
		align-items: center;
	}

	.product-name {
		font-size: 16px;
		color: #333;
		margin-right: 10px;
	}

	.product-count {
		font-size: 14px;
		color: #999;
	}

	.action-buttons {
		display: flex;
		align-items: center;
	}

	.cancel-button,
	.contact-seller-button {
		background-color: #fff;
		color: #333;
		border: 1px solid #999;
		border-radius: 4px;
		padding: 8px 16px;
		font-size: 14px;
		margin-right: 10px;
		cursor: pointer;
	}

	.contact-seller-button {
		color: #ff6600;
		border-color: #ff6600;
	}

	.no-order {
		margin-top: 20px;
		text-align: center;
		color: #999;
	}
</style>